<template>
    <el-container>
        <el-header>王木木的博客系统</el-header>
        <el-main>
            <el-card>
                <el-form :model="user" :rules="userRule" ref="loginForm"  class="demo-ruleForm">
                    <el-form-item prop="username">
                        <el-input prefix-icon="el-icon-user-solid" v-model="user.username"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input prefix-icon="el-icon-s-goods" type="password" v-model="user.password"></el-input>
                    </el-form-item>
                    <el-row>
                        <el-button @click="login" type="primary">登录</el-button>
                        <el-button @click="clearForm">撤销</el-button>
                    </el-row>
                </el-form>
            </el-card>
        </el-main>
        <el-footer>Vue-CLI  Element-UI 2020</el-footer>
    </el-container>
</template>

<script>
export default {
    data(){
        return{
            user:{
                username:'',
                password:''
            },
            userRule:{
                username:[ 
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ],
                password:[
                     { required: true, message: '请输入密码', trigger: 'blur' },
                     { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
                ]
            },
        }
    },
    methods:{
        clearForm(){
            //清除表单数据
            this.$refs.loginForm.resetFields();
        },
        login(){
            this.$refs.loginForm.validate((val)=>{
                if(val){
                    //表单验证通过
                    if(this.user.username==="admin" && this.user.password==="123456"){
                        this.$message.success("success");
                        window.sessionStorage.setItem("user",this.user);
                        this.$router.push("/home")
                    }else{
                        this.$message.error("用户名或密码错误");
                    }
                }
            });
        }
    },
}
</script>


<style scoped>
.el-container {
    width: 100%;
    height: 100%;
    position: absolute;
}
.el-header,.el-footer {
    width: 100%;
    text-align: center;
    line-height: 60px;
}
.el-main {
    background-color: #2b4b6b;
}
.el-card {
    width: 50%;
    margin: 0 auto;
    margin-top: 80px;
}
.el-row {
    text-align: center;
}
</style>